<template>
  <div>
    <TodoHeader @addTodo="addTodo" />
    <TodoMain :list="showList" @delTodo="delTodo" />
    <TodoFooter :status="status" :lastLength="lastLength" @updateStatus="updateStatus" />
    <button @click="onBack">返回</button>
  </div>
</template>

<script>
	// 1导入	
	import TodoHeader from './components/TodoHeader.vue'
	import TodoMain from './components/TodoMain.vue'
	import TodoFooter from './components/TodoFooter.vue'

	export default {
	  // 2注册 局部
	  components: {
	    TodoHeader,
	    TodoMain,
	    TodoFooter
	  },
	  data() {
	    return {
	      // 数据一般建议放在父组件,同样对数据的操作也是放在这里
	      status: 'all', // all active completed
	      list: [
	        { id: 1, name: '晨练', done: false },
	        { id: 2, name: '练书法', done: true }
	      ]
	    };
	  },
	  computed: {
	    lastLength() {
	      return this.list.filter(item =>!item.done).length;
	    },
	    showList() {
	      switch (this.status) {
	        case 'all':
	          return this.list;
	        case 'active':
	          return this.list.filter(item =>!item.done);
	        case 'completed':
	          return this.list.filter(item => item.done);
	        default:
	          return [];
	      }
	    }
	  },
	  methods: {
	    addTodo(name) {
	      if (name && name.trim()!== '') {
	        this.list.push({
	          name: name,
	          done: false,
	          id: ~~(Math.random() * 1000)
	        });
	      }
	    },
	    delTodo(id) {
	      if (typeof id === 'number' || typeof id ==='string') {
	        this.list = this.list.filter(item => item.id!== id);
	      }
	    },
	    updateStatus(status) {
	      this.status = status;
	    },
	    onBack() {
	      if (this.$router) {
	        this.$router.back();
	      } else {
	        console.warn('$router is not defined');
	      }
	    }
	  }
	};
	</script>

<style>
/* 可以在这里添加一些全局样式或者针对当前组件的基础样式 */
button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
</style>